feat: CSS redesign — darker theme, lighter typography, muted agent text#3043
Open
tracyjohnsonux wants to merge 2 commits intomainfrom
Open
feat: CSS redesign — darker theme, lighter typography, muted agent text#3043tracyjohnsonux wants to merge 2 commits intomainfrom
tracyjohnsonux wants to merge 2 commits intomainfrom
Conversation
CSS Variable Changes: - Background: #09090B (deeper dark), Code bg: #141416 - Link color: #60A5FA, Inline code: #94A3B8 - Success badge: bg #052E16/text #16A34A - Danger badge: bg #450A0A/text #F87171 - Muted agent text: #888895 Typography: - Body font-weight: 200, letter-spacing: 0.01em - Code font-weight: 400 - Custom ordered list counters, no default bullets - Numbered section body indented 24px Component Styling: - Tables: no border, no header bg, row dividers only, scroll wrapper - Thinking blocks: transparent bg, monospace badge, muted content - Tool calls: muted text, icon-only status, pipe separators - User message: transparent border (show on hover) - Details/summary: SVG chevron, no border, indented content - Dark thin scrollbars - File change cards, step progress lists Data Attributes Added: - data-user-message, data-message-role on UserMessage - data-reasoning, data-reasoning-toggle/badge/preview/content on ReasoningMessage - data-tool-call, data-tool-header/command/status on BashToolCall, GenericToolCall - data-exit-code on ExitCodeBadge (ToolPrimitives) - table-scroll-wrapper on markdown tables - file-change-card/header/body on FileEditToolCall - step-list, step-item, step-active/done/pending on TodoList
tracyjohnsonux
force-pushed
the
css-redesign
branch
from
4a75ec5 to
9d8c129
Compare
…ning - ExpandIcon now renders ChevronRight SVG instead of ▶ text character - ReasoningMessage uses ChevronRight SVG instead of ▸ text character - Removed 22 instances of ▶ children from ExpandIcon callsites - Consistent #888895 muted color on all chevrons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
CSS Redesign
Design riff applied from
mux-css-riffworkspace. All changes are CSS-layer overrides with minimal component data-attribute additions for targeting.Color Changes
--color-background#1e1e1e/hsl(0 0% 12%)#09090B--color-code-bg#0d0d0d#141416#60A5FA#94A3B8#052E16text#16A34A#450A0Atext#F87171#888895Typography
font-weight: 200,letter-spacing: 0.01emfont-weight: 400Component Styling
Data Attributes Added (for CSS targeting)
data-user-message,data-message-roleon UserMessagedata-reasoning,data-reasoning-*on ReasoningMessagedata-tool-call,data-tool-*on BashToolCall, GenericToolCalldata-exit-codeon ExitCodeBadgetable-scroll-wrapperclass on markdown tablesfile-change-*classes on FileEditToolCallstep-list,step-item,step-*classes on TodoListPreview
Dev server running on workspace
mux-experiments-css— frontend on port 5173, backend on port 3000.Design Reference
Audit:
~/design-ref/VISUAL_AUDIT.mdin the workspace